<template>
    <div class="tb-item">
        <div class="hd-t">
            <div class="more-left c-title-4">
                大户持仓量多空比
                <div class="more-box">
                    <v-tooltip v-model="show" location="top">
                        <template v-slot:activator="{ props }">
                            <img src="@/assets/ask.png" class="i-ask" v-bind="props" />
                        </template>
                        <div class="more-t">大户账户数多空比大户账户数多空比大户账户数多空比大户账户数多空比大户账户数多空比</div>
                    </v-tooltip>
                </div>
            </div>
            <div class="hd-r">
                <div class="hd-tip c-title-5">
                    <span class="ht-lab">持仓总量</span>
                    <span class="win-color">12.0%</span>
                </div>
                <div class="hd-tip c-title-5">
                    <span class="ht-lab">持仓总价值</span>
                    <span class="win-color">12.0%</span>
                </div>
            </div>
        </div>
        <div class="dk-box">
            <div class="dk-chart" ref="dom"></div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useAccount } from "@/stores/account";
import { get } from "@/comm/request";
import { URL_POSITION_RATIO, URL_TOTAL_RATIO } from "@/comm/api";
import { useKline } from "@/stores/kline";
import { formatBigNumber, formatTimestamp } from "@/comm/format";

const echarts = (window as any)["echarts"];
const account = useAccount();
const kline = useKline();

const dom = ref(null);
const show = ref(false);

const props = defineProps({
    symbol: String,
    period: String
});

onMounted(async () => {
    // console.log("dom-----", dom);
    loadData();
});

const loadData = async () => {
    //大户持仓量多空比
    let res: any = await get(URL_POSITION_RATIO, {
        symbol: props.symbol,
        period: props.period
    });
    console.log(res, "res");
    initTable(res.data);
};

const initTable = (ary: any[]) => {
    let option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "cross"
            },
            borderWidth: 0,
            backgroundColor: "#2F363E",
            formatter: function (params: any) {
                let t1 = `<span class='ct-num'>${formatTimestamp(params[0].data.name)}</span>`;
                let t2 = `<span class='ct-tip'>持仓总量</span> <span class='ct-num'>${params[0].data.value}</span>`;
                let t3 = `<span class='ct-tip'>持仓总价值</span> <span class='ct-num'>${params[1].data.value}</span>`;
                return [t1, t2, t3].join("<br>");
            }
        },
        legend: {
            data: ["持仓总量", "持仓总价值"],
            bottom: 10,
            textStyle: {
                fontSize: 12,
                color: "#ffffff"
            }
        },
        xAxis: {
            type: "category",
            splitLine: {
                show: false
            },
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                data: ary.map((val, i) => {
                    return val.timestamp;
                }),
                formatter: function (value: any) {
                    // console.log(value, "--");
                    // const date = new Date(ary[value].timestamp);
                    // return date.toLocaleDateString(); // 这里使用默认的日期格式
                    return formatTimestamp(ary[value].timestamp);
                }
            }
        },
        yAxis: [
            {
                type: "value",
                position: "left",
                name: "量",
                boundaryGap: [0, "100%"],
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#B1B6C6"
                    }
                },
                axisLabel: {
                    formatter: "{value}"
                }
            },
            {
                type: "value",
                position: "right",
                name: "价值",
                boundaryGap: [0, "100%"],
                splitLine: {
                    show: true,
                    lineStyle: { color: "rgba(255, 255, 255, 0.06)" }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#B1B6C6"
                    }
                },
                axisLabel: {
                    formatter: "{value}"
                }
            }
        ],
        series: [
            {
                name: "持仓总量",
                type: "line",
                showSymbol: false,
                data: ary.map(i => {
                    return {
                        name: i.timestamp,
                        value: i.longShortRatio
                    };
                }),
                lineStyle: {
                    color: "#2DAEA1"
                },
                itemStyle: {
                    normal: {
                        color: "#2DAEA1"
                    }
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(45,174,161,0.8)"
                        },
                        {
                            offset: 1,
                            color: "rgba(45,174,161,0)"
                        }
                    ])
                }
            },
            {
                name: "持仓总价值",
                type: "line",
                yAxisIndex: 1,
                showSymbol: true,
                data: ary.map(i => {
                    return {
                        name: i.timestamp,
                        value: i.shortAccount
                    };
                }),
                itemStyle: {
                    normal: {
                        color: "#207ED3"
                    }
                },
                lineStyle: {
                    color: "#207ED3"
                },
                markline: {
                    silent: true,
                    lineStyle: {
                        normal: {
                            color: "#2DAEA1"
                        }
                    }
                }
            }
        ]
    };
    var chartDom = dom.value;
    var myChart = echarts.init(chartDom);
    myChart.setOption(option);
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
